<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 可选的框架 -->
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="../../../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> -->
	</head>
	<body>
		<div id="app" class="main">
			<div class="an-wrap">
				<div class="allWrap">
					<div class="fWrap" v-if="fArr.length>=1" v-for="(wrapLine,wrapIndex) in fArr" :key="wrapIndex" :style="{fontSize:fontSizeArr[wrapIndex]}">
						<div class="fContent" v-for="(f,fIndex) in wrapLine" :key="fIndex" :style="{backgroundColor:f.backgroundcolor}">
							{{f.text}}
						</div>
					</div>
					<div class="textHolder" v-if="fArr.length==0">
						在输入框中输入待求斐波那契数列值的位数
					</div>
				</div>
				
				
			</div>

			<div class="ct-wrap">
				<!-- 控制容器 control-wrap -->
				<div class="control-input-wrap">
					<input type="number" min="2" max="9"  name="" id="" value="" class="control-input-wrap-input" v-model.number="inputNum" @change="onInputChange" @blur="onBlur"/>
					<div class="control-input-wrap-div">
						位数3~9
					</div>
				</div>
				<div type="button" class="button-blue" @click="autoNextStep">
					<div class="" id="autoNextStep">
						自动
					</div>
				</div>
				<div type="button" class="button-red" @click="nextStep">
					<div class="">
						下一步
					</div>
				</div>
				<div type="button" class="button-orange" @click="reset">
					<div class="">
						重置
					</div>
				</div>
			</div>
		</div>
		<!-- 弹出消息提示组件 -->
		<div id="msgQueueWrap" ></div>
		
	</body>
	<!-- 引入当前目录下的css和js -->
	<link rel="stylesheet" type="text/css" href="./recursive_demo_2.css" />
	<script src="./gradientColor.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="./recursive_demo_2.js"></script>
	<!-- 引入控件，可选 -->
	<link rel="stylesheet" type="text/css" href="../../../css/control.css" />
	<script src="../../../js/control.js" type="text/javascript" charset="utf-8"></script>
	
	
	
	
	

</html>
